@extends('Admin.index')
@section('css')
    <style>
        #layui-layer1 .layui-layer-setwin .layui-layer-close1{
            background-position: 1px -40px;
        }
    </style>

@endsection


@section('content')

    <div class="app-third-sidebar">
        <nav class="ui-nav " style="display: block;">
            <ul>
                <li>
                    <a href="/admin/statistics"><span>数据统计</span></a>
                </li>
            </ul>
        </nav>
    </div>

    <div id="wrapper">

        <div class="row">
            <div class="col-lg-12">
                <div class="row">
                    <div class="col-md-2">
                        <a class="btn btn-success" role="button" onclick="statistics.expert()">导出报表</a>
                    </div>

                    <div class="col-md-10" >
                        <form class="form-inline" id="search-form" onsubmit="return false;">
                            <div class="form-group">
                                <input type="text" style="width: 160px;" class="form-control" name="startDate" onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD'})" placeholder="请选择开始时间">&nbsp;&nbsp;~&nbsp;
                            </div>

                            <div class="form-group">
                                <input type="text" style="width: 160px;"  class="form-control" name="endDate" onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD'})" placeholder="请选择结束时间">
                            </div>
                            <div class="input-group">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" name="search" type="button">查询</button>
                                     <button class="btn btn-warning" name="to-reset" type="button">重置</button>
                                </span>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
        <br>

        <div class="row">

            <div class="col-lg-12">
                <div id="toolbar">

                </div>
                <table id="table"></table>
            </div>

        </div>
        <div class="row">

            <div class="amin">

            </div>

        </div>

    </div>
    <div id="wrapper">
        <div class="row">
            <div class="row">
                <div id="main" style="width: 1100px;height:400px;"></div>
            </div>
        </div>
    </div>
@endsection


@section('js')

    <script>

        var bootstrap_table_ajax_url  = '/admin/statistics/search';

        $('#table').bootstrapTable({
            classes: 'table table-hover', //bootstrap的表格样式
            sidePagination: 'server', //获取数据方式【从服务器获取数据】
            pagination: true, //分页
            height: $(window).height() - 200, //表格高度
            pageNumber: 1, //页码【第X页】
            pageSize: 10, //每页显示多少条数据
            queryParamsType: 'limit',
            queryParams: function (params) {
                var dt = E.getFormValues('search-form');
                $.extend(params, dt);
                return params;
            },
            responseHandler: function(res){ //加载服务器数据之前的处理程序，可以用来格式化数据。参数：res为从服务器请求到的数据。
                showChars(res);
                return res;
            },

            url: bootstrap_table_ajax_url,//ajax链接
            sortName: 'ID', //排序字段
            sortOrder: 'DESC',//排序方式
            columns: [ //字段
                { title: '序号', field: 'id', align: 'center' },
                { title: '日期', field: 'date_time', align: 'center'},
                { title: '签到人数', field: 'sign_count', align: 'center'},
                { title: 'PK人数',  field: 'pk_num', align: 'center'},
                { title: 'PK局数',  field: 'pk_count', align: 'center'},
                { title: '净消耗金币',  field: 'gold_record_count', align: 'center' },
                { title: '新增用户',  field: 'user_count', align: 'center' },
                { title: '抢三玩法',  field: 'pk_count_three', align: 'center' },
                { title: '抢五玩法',  field: 'pk_count_five', align: 'center' }
            ]

        });

        var statistics = {
            expert:function () {
                var searchForm = document.getElementById('search-form');
                searchForm.action = '/admin/excel/export/2';
                searchForm.submit();
            }
        };

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        function showChars(json){
            var date_time=[]
            var sign_count=[]
            var pk_count=[]
            var pk_num=[]
            var gold_record_count=[]
            var pk_count_three=[]
            var pk_count_five=[]
            var user_count=[]
            $.each(json.rows,function(i,v){
                date_time.push(v['date_time'])
                sign_count.push(v['sign_count'])
                pk_num.push(v['pk_num'])
                pk_count.push(v['pk_count'])
                gold_record_count.push(v['gold_record_count'])
                pk_count_three.push(v['pk_count_three'])
                pk_count_five.push(v['pk_count_five'])
                user_count.push(v['user_count'])
            })
            console.log(pk_count_five)
            option = {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:['签到人数','PK人数','PK局数','净消耗金币数','新增用户','抢三玩法','抢五玩法']
                },
                grid: {
                    left: '8%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis:
                    {
                    type: 'category',
                    boundaryGap: false,
                    data:date_time,
                    axisLabel:{
                        rotate:30,
                        interval:0
                    }

                    },
                yAxis: {
                    type: 'value'
                },


                series: [
                    {
                        name:'签到人数',
                        type:'line',
                       // stack: '总量',
                        data:sign_count
                    },
                    {
                        name:'PK人数',
                        type:'line',
                        //stack: '总量',
                        data:pk_num
                    },
                    {
                        name:'PK局数',
                        type:'line',
                       // stack: '总量',
                        data:pk_count
                    },
                    {
                        name:'净消耗金币数',
                        type:'line',
                       // stack: '总量',
                        data:gold_record_count
                    },
                    {
                        name:'新增用户',
                        type:'line',
                       // stack: '总量',
                        data:user_count
                    },
                    {
                        name:'抢三玩法',
                        type:'line',
                        //stack: '总量',
                        data:pk_count_three
                    },
                    {
                        name:'抢五玩法',
                        type:'line',
                        //stack: '总量',
                        data:pk_count_five
                    }
                ]
            };
            myChart.setOption(option);
        }

        // 指定图表的配置项和数据


        // 使用刚指定的配置项和数据显示图表。
        //myChart.setOption(option);

    </script>

@endsection